<template>
  <div class="banner">
    <div class="h4">xxxxx</div>
    <div class="h5">
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
    </div>
    <div class="text">
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
    </div>
    <div class="btn-mint">Mint</div>
  </div>
  <div class="grid-width">
    <div class="h6">The possibilities are endless</div>
    <div class="swiper">
      <div class="swiper-wrap">
        <div class="swiper-item" v-for="index in 6" :key="index">
          <div class="swiper-item-wrap">
            <div class="swiper-item-box">
              <img class="swiper-item-icon" src="@/assets/swiper-3.png" alt="" />
              <div class="swiper-item-footer">
                <p class="swiper-item-name">The Weirdo Ghost Gang</p>
                <p class="swiper-item-text">Floor price:1.3</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="card">
      <img src="@/assets/qiu.png" class="card-qiu" alt="" />
      <div class="card-btn">
        <div class="card-btn-primary">LP staking</div>
        <div class="card-btn-primary">NFT staking</div>
      </div>
      <div class="card-overview">OVERVIEW</div>
      <!-- <div class="card-dl">
        <div class="card-dt">4572</div>
        <div class="card-dd">Leaderboard</div>
        <div class="card-bar"></div>
      </div> -->
      <div class="card-dl">
        <div class="card-dt">4545793</div>
        <div class="card-dd">Minted</div>
        <div class="card-bar"></div>
      </div>
      <div class="card-dl">
        <div class="card-dt">23527382</div>
        <div class="card-dd">Total supply</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import store from "@/vuex";

const nftList = ref([]);
onMounted(() => {
  store.commit("initWorkspace", {
    callback: () => {
      getNft();
    },
  });
});

// 定义 loadData 函数
async function getNft() {
  const workspaceValue = store.state.workspace.value;
  if (!workspaceValue) {
    console.error("Workspace is not initialized.");
    return;
  }

  const {
    connection, //链接
    program, //合约
    wallet, // 钱包
    provider, //
  } = workspaceValue;

  let img = "";

  try {
    const ownerstring = provider.wallet.publicKey.toBase58();
    const ownerkey = provider.wallet.publicKey;
    // nfg接口
    const url = `https://devnet.helius-rpc.com/?api-key=78483ff4-5689-45fe-a8da-f569c3894e07`;

    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        jsonrpc: "2.0",
        id: "my-id",
        method: "searchAssets",
        params: {
          ownerAddress: ownerstring,
          grouping: [
            "collection",
            "6SqihPjBVhUEZaYUHZRDixK8DKXzLUovRyZYrTgSsvWj",
          ],
          page: 1,
          limit: 1000,
        },
      }),
    });

    const { result } = await response.json();
    //console.log(result);

    let filteredResults = [];
    
    // 轮播图
    result.items.forEach((nft) => {
      // 轮播图底图
      const nft_img = nft.content.links.image;

      const nft_id = nft.id;
      // nft 名称
      const nft_name = nft.content.metadata.name;

      const nft_symbol = nft.content.metadata.symbol;

      filteredResults.push({
        nft_id: nft_id,
        nft_name: nft_name,
        nft_symbol: nft_symbol,
        nft_img: nft_img,
      });
    });

    // console.log(filteredResults);
    nftList.value = filteredResults;
  } catch (error) {
    console.error("Failed to load data:", error);
  }
}
</script>
<style scoped>
.banner {
  background: url(@/assets/banner.png) center center no-repeat;
  height: 10rem;
  background-size: 19.2rem 100%;
  padding-top: 2.05rem;
}
.h4 {
  text-align: center;
  color: #4a82f0;
  font-size: 1.1rem;
  margin-bottom: 0.72rem;
  line-height: 1;
}
.h5 {
  font-size: 0.64rem;
  color: #5c5c5c;
  margin-bottom: 0.5rem;
  text-align: center;
  line-height: 1;
}
.text {
  margin-bottom: 1rem;
  font-size: 0.22rem;
  text-align: center;
  color: #868686;
  line-height: 1;
}
.btn-mint {
  width: 2.18rem;
  height: 0.59rem;
  line-height: 0.59rem;
  background: #0759fa;
  border-radius: 0.6rem;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  margin: 0 auto;
  cursor: pointer;
}
.h6 {
  margin-top: 0.4rem;
  margin-bottom: 0.77rem;
  color: #868686;
  font-size: 0.3rem;
}
.swiper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: auto;
}
::-webkit-scrollbar {
  scrollbar-color: #ff0000 #eaeaea;
}
 
.swiper-wrap{
  display: flex;
  flex-direction: row;
}
.swiper-item {
  width: 3.43rem;
  margin-right: 0.48rem;
}
.swiper-item-wrap {
  position: relative;
  padding-top: 100%;
}
.swiper-item-box {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.swiper-item-icon {
  width: 100%;
  height: 100%;
}
.swiper-item-footer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: 0.16rem 0.14rem;
}
.swiper-item-name {
  font-size: 0.2rem;
  color: #fff;
}
.swiper-item-text {
  font-size: 0.14rem;
  color: #fff;
}
.card {
  height: 11.64rem;
  margin-top: 1.04rem;
  background: url(@/assets/card.png) no-repeat;
  background-size: 100% 100%;
  padding-top: 0.8rem;
}
.card-qiu {
  width: 1.33rem;
  height: 1.1rem;
  margin: 0 auto 0.57rem;
}
.card-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.card-btn-primary {
  width: 2.56rem;
  cursor: pointer;
  height: 0.69rem;
  line-height: 0.69rem;
  color: #fff;
  font-size: 0.26rem;
  margin: 0 0.21rem;
  background: #0759fa;
  border-radius: 0.6rem;
  text-align: center;
}
.card-overview {
  font-size: 0.63rem;
  margin-top: 0.5rem;
  text-align: center;
  margin-bottom: 0.4rem;
  line-height: 1;
}
.card-dl {
  line-height: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.3rem;
}
.card-dt {
  color: #5c5c5c;
  font-size: 0.5rem;
}
.card-dd {
  color: #808080;
  font-size: 0.3rem;
  margin-top: 0.2rem;
}
.card-bar {
  width: 0.43rem;
  height: 0.09rem;
  background-color: #0759fa;
  border-radius: 0.08rem;
  margin-top: 0.3rem;
}

@media screen and (max-width: 768px) {

  .swiper{
    margin: 0 -0.5rem;
    justify-content: flex-start;
    overflow: auto;
  }
  .swiper-wrap{
    padding-left: 0.5rem;
  }
  .swiper-item {
    width: 3.68rem;
  }
}
</style>
